<!--
@fucntion: 监控设备信息
-->
<template>
<div class="module-basic-Management">
  <el-row style="height:100%;">
    <el-col style="height:100%;">
      <table-panel 
      v-show="SwitchingPoint"
      :name="'监控设备信息'" 
      :columns="ManagementColumns" 
      :tableData="ManagementData" 
      :showRowNumber="false" 
      :multiSelection="true"
      :inputLabelSearchMode="true"
      :canCreate="authorities.create" 
      :canEdit="authorities.edit" 
      :canDelete="authorities.delete"
      :canExport="authorities.export"
      :currentPage="ManagementCurrentPage" 
      :totalNum="ManagementTotalNum" 
      @page-change="onPageChange('Management',$event)" 
      :pageSize="pageSize"
      @table-searching="onSearching('Management',$event)"
      @table-create="onCreate('Management',$event)" 
      @table-edit="onEdit('Management', $event)"
      @table-delete="onDelete('Management',$event)" 
      @table-export="onExport('Management',$event)"
      @selection-change="onSelectionChange('Management',$event)">
      </table-panel>

      <el-col v-show="!SwitchingPoint">
        <el-card style="background-color: #DCDFE6;"> 
          <span v-if="(Ddata)" style="font-weight:bold;">监控设备信息添加</span>
          <span v-else style="font-weight:bold;">监控设备信息修改</span>
          <el-button type="primary" plain size="mini" style="float:right" 
            @click="onConfirm('Management')">确认
          </el-button> 
          <el-button  plain size="mini" style="float:right" 
            @click="SwitchingPoint = !(SwitchingPoint);">返回
          </el-button> 
        </el-card>

        <el-form ref="DetailedData" 
        :model="DetailedData" 
        :rules="rules" 
        label-position="right" 
        label-width="105px" 
        size="mini" 
        status-icon>
        <el-card style="width: 100%;">
          <el-card>
            <el-row :gutter="24" style="height:100%;">
              <el-col :span="12">
                <el-form-item label="设备名称" prop="CJQMC">
                  <el-input  v-model="DetailedData.JKSBMC"></el-input>
                </el-form-item>
                <el-form-item label="性能状态" prop="XNZT">
                  <el-input  v-model="DetailedData.XNZT"></el-input>
                </el-form-item>
                <el-form-item label="科室名称" prop="DWMC">
                  <el-input  v-model="DetailedData.DWBH"></el-input>
                </el-form-item>
                <el-form-item label="规格型号" prop="GGXH">
                  <el-input  v-model="DetailedData.GGXH"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生产厂家" prop="SCCJ">
                  <el-input  v-model="DetailedData.SCCJ"></el-input>
                </el-form-item>
                <el-form-item label="出厂编号" prop="CCBH">
                  <el-input  v-model="DetailedData.CCBH"></el-input>
                </el-form-item>
                <el-form-item label="购买日期" prop="GMRQ">
                  <el-date-picker
                    v-model="DetailedData.GMRQ"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="启用日期" prop="QYRQ">
                  <el-date-picker
                    v-model="DetailedData.QYRQ"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
          <el-card style="text-align: left;">
            <!-- 采集器关联列表  GLRecord -->
            <SPan style="text-align: left;">关联采集器</SPan>
            <el-table :data="GLData" border stripe size="mini">
              <el-table-column type="index"></el-table-column>
              <el-table-column label="采集器名称" prop="CJQMC"></el-table-column>
              <el-table-column label="采集器ID" prop="CJQID"></el-table-column>
              <el-table-column label="网关唯一码uuid" prop="UUID"></el-table-column>
              <el-table-column label="采集器编号" prop="CJQBH"></el-table-column>
              <el-table-column label="分组编号" prop="GROUPID"></el-table-column>
              <el-table-column label="操作(关联)">
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.SFGL"
                    :active-value="1"
                    :inactive-value="0"
                  >
                  </el-switch>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-card>
        </el-form>

      </el-col>
    </el-col>
  </el-row>
</div>
</template>

<script>
import TablePanel from "@/components/basic/TablePanel";//一个简单的增删查改表格
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";//从表格列变换到表单的一些工具

//meta info
var Management = "Management"; // 表格名称
var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// 监控设备信息-列
var ManagementColumns = [
  {
    prop: "JKSBBH",
    label: "监控设备编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "JKSBMC",
    label: "监控设备名称",
  },
  {
    prop: "GGXH",
    label: "规格型号",
  },
  {
    prop: "SCCJ",
    label: "生产厂家",
  },
  {
    prop: "CCBH",
    label: "出厂编号",
  },
  {
    prop: "GMRQ",
    label: "购买日期",
    type:"date",
  },
  {
    prop: "QYRQ",
    label: "启用日期",
    type:"date",
  },
  {
    prop: "XNZT",
    label: "性能状态",
  },
  {
    prop: "DWBH",
    label: "单位编号",
    outOfSearch:true,
    hidden: true,
  },
  {
    prop: "DWMC",
    label: "单位名称",
    outOfSearch:true,
    hidden: true,
  },
];

export default {
  name: "Management",
  components: {
    "table-panel": TablePanel,
  },
  methods: {
    onSearching: function(tname, params) {//查询
      var me = this;
      let url = "/static/data/BXManagement.json";// /jcJsxxb   /static/data/Management.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.data;
              me[tname+totalNumAttr] = resp.data.data.length;
            }
        });
      }
    },
    onCreate: function(tname) {// 新增
      var me = this;
      this.DetailedData = {};
      this.GLData = [];
      this.Ddata = true;
      me[tname + recordAttr] = formModelInitFromTable(me[tname + columnsAttr]);
      
      me[tname + dlgVisibleAttr] = true;

      this.SwitchingPoint = !(this.SwitchingPoint);

      for(var i = 0 ; i < me[tname+dataAttr][0].CJQlist.length ; i++){
        if((me[tname+dataAttr][0].CJQlist[i].SFGL) == 0){
          this.GLData.push(me[tname+dataAttr][0].CJQlist[i])
        }
      }

    },
    onEdit: function(tname, row) {// 编辑
      var me = this;
      this.Ddata = false;
      me[tname + recordAttr] = row;
      me[tname + dlgVisibleAttr] = true;

      this.SwitchingPoint = !(this.SwitchingPoint);

      this.DetailedData = me[tname+dataAttr][(me[Management + recordAttr].JKSBBH)-1]

      this.GLData = me[tname+dataAttr][((me[Management + recordAttr].JKSBBH)-1)].CJQlist
    },
    onDelete: function(tname, row) {// 删除
      var me = this;
      me.$confirm("确定删除这条记录吗?", "提示", {
          type: "warning"
      }).then(() => {
          me.deleteRequest(`/api/Management/${row.JKSBBH}`).then((resp)=>{
            if(resp.status == 200) {
              me.$message.success("删除成功!");
              me.onSearching(Management,{});// 重新加载表格数据
            }else{
              me.$message.error('删除失败！');
            }
          });
      }).catch(() => {});
    },
    onSelectionChange: function(tname, data) {// 选中改变
      var me = this;
      // 缓存记录，按照编号，查询对应的选中权限节点数组
      me[tname + selectionAttr] = data;
    },
    onExport: function(tname, params) {// 导出
      var me = this;
      me.$message.info("发送导出请求，返回下载路径");
    },
    onPageChange:function(tname,page){// 分页改变
      var me = this;
      let url = "/jcJsxxb";// /jcJsxxb

      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.data;
              me[tname+totalNumAttr] = resp.data.data.length;
            }
        });
      }

    },
    onConfirm: function(tname) {// 对话框-确认
      let me = this;
      // 发送请求 /jcJsxxb

      if(me[Management + recordAttr].JKSBBH == ""){

        this.$notify.info({
          title: '成功',
          message: '采集器添加成功'
        });

        me[Management + recordAttr].CJQlist = this.GLData//添加开关中的列表内容

        me.postRequest("/api/Management",me[Management + recordAttr]).then(resp => {//新增
          if (resp.status == 200) {
            me.$message.success("提交成功！");
            //最后，隐藏对话框
            me[tname + dlgVisibleAttr] = false;
            this.SwitchingPoint = !(this.SwitchingPoint);
            me.onSearching(Management, {});// 重新查一遍
          } else {
            me.$message.error("服务器发生错误，代码：" + resp.status);
          }
        });
      }else{

        this.$notify.info({
          title: '成功',
          message: '采集器修改成功'
        });
        
        me[Management + recordAttr].CJQlist = this.GLData//添加开关中的列表内容

        me.postRequest("/api/VideoModify",me[Management + recordAttr]).then(resp => {//更改
          if (resp.status == 200) {
            me.$message.success("提交成功！");
            //最后，隐藏对话框
            me[tname + dlgVisibleAttr] = false;
            this.SwitchingPoint = !(this.SwitchingPoint);
            me.onSearching(Management, {});// 重新查一遍
          } else {
            me.$message.error("服务器发生错误，代码：" + resp.status);
          }
        });
      }
    },
  },

  data() {
    return {
      authorities:{
        create:true,
        delete:true,
        edit:true,
        search:true,
        export:true
      },// 权限控制
      [Management + columnsAttr]: ManagementColumns, // 表格-列
      [Management + dataAttr]: [], // 表格的数据
      [Management + selectionAttr]: [], // 当前选中
      [Management + dlgVisibleAttr]: false, // 对话框是否可见
      [Management + recordAttr]: {}, // 表单模型
      [Management + rulesAttr]: {},// 表单验证
      [Management + curPageAttr]:1,// 当前页
      [Management + totalNumAttr]:0,// 总数
      [Management + qParamAttr]:{},// 查询参数
      pageSize:20,// 每页数量

      SwitchingPoint:true,//表单列表之间-切换控制

      DetailedData:{},//存储表单中的数据

      Ddata:true,//控制表单头标题的显示内容

      GLData: [],//采集器关联-使用数据

      GLRecord:true,
      GLRecordData:{
        CJQBH:'',
        JKSBBH:'',
      },

      //表单校验
      rules: {
          CJQMC: [
            { required: true, message: '请输入设备名称', trigger: 'blur' },
          ],
          JKSBBH: [
            { required: true, message: '请输入设备编号', trigger: 'blur' },
          ],
          XNZT: [
            { required: true, message: '请输入性能状态', trigger: 'blur' },
          ],
          DWBH: [
            { required: true, message: '请输入单位编号', trigger: 'blur' },
          ],
          GGXH: [
            { required: true, message: '请输入规格型号', trigger: 'blur' },
          ],
          SCCJ: [
            { required: true, message: '请输入生产厂家', trigger: 'blur' },
          ],
          CCBH: [
            { required: true, message: '请输入出厂编号', trigger: 'blur' },
          ],
          GMRQ: [
            { type: 'date', required: true, message: '请选择购买日期', trigger: 'change' }
          ],
          QYRQ: [
            { type: 'date', required: true, message: '请选择启用日期', trigger: 'change' }
          ],
        }
      
    };
  },
  created: function() {
    var me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 表单模型初始化
    me[Management + recordAttr] = formModelInitFromTable(me[Management + columnsAttr]);
    // 表单验证初始化
    me[Management + rulesAttr] = formRulesInitFromTable(me[Management + columnsAttr]);

    
    me.onSearching(Management, {});// 重新查一遍
    

  }
};
</script>

<style lang="scss">
.module-basic-Management {
  height: 100%;
}
</style>